<template>
  <div class="global-monitor">
    <div class="global-monitor-left animate__animated animate__fadeInLeftBig">
      <PlatformData :mapDetail="screenData.screenPlat"></PlatformData>
      <Task :mapDetail="screenData.screenPlat" class="left-chars"></Task>
      <matterPig :mapDetail="screenData.screenPlat" class="left-chars"></matterPig>
    </div>
    <div class="global-monitor-center animate__animated animate__fadeInUpBig">
      
      
      <chinaMap v-if="chinaType==='china'" @setChina="setChina" :chinaMapIn="chinaMapInfo" :mapDetail="mapDetail" />
      <province v-if="chinaType==='province'" @setChina="setChina" :provinceName="province.provinceName" :province="province.province" :chinaMapIn="chinaMapInfo" :mapDetail="mapDetail"  />
      <City v-if="chinaType==='city'" @setChina="setChina" :city="city" :provinceName="provinceName" :province="province"  :chinaMapIn="chinaMapInfo" :mapDetail="mapDetail"  />
      <div class="global-monitor-center-bottom">
        <Matter v-if="food_num"  :summaryInfo="food_num"  type="1" ref="stockPie" ></Matter>
      </div>
      <!-- <Pdialng :companyTotal="screenData.companyTotal" :projectTotal="screenData.projectTotal" class="left-dialng"></Pdialng> -->
    </div>
    <div class="global-monitor-right animate__animated animate__fadeInRightBig">
      <CompanyData v-if="screenData.screenCompanyList" :mapDetail="screenData.screenCompanyList"  class="right-data"></CompanyData>
      <CompanyTaskData v-if="screenData.screenCompanyList" :mapDetail="screenData.screenCompanyList"  class="right-data" titleName="当日能耗"></CompanyTaskData>
      <CompanyData v-if="screenData.screenCompanyList" :mapDetail="screenData.screenCompanyList"  class="right-data" titleName="项目概况"></CompanyData>
    </div>
  </div>
</template>

<script>
import chinaMap from './chinaMap'
import province from './province'
import City from './city'
import { cityOps } from '@/utils/json/city'
import PlatformData from "./components/PlatformData"
import Task from './components/Task'
import matterPig from './components/matterPig'
import Matter from './components/Matter'
import CompanyData from "./components/CompanyData"
import CompanyTaskData from "./components/CompanyTaskData"
import Pdialng from "./components/Pdialng"
export default {
  components: {
    chinaMap,
    province,
    City,
    PlatformData,
    Task,
    matterPig,
    Matter,
    CompanyData,
    CompanyTaskData,
    Pdialng
  },
  data() {
    return {
      screenData:{
        companyTotal: 0, //公司数量
        projectTotal: 0, //项目数量
        screenCompanyList: [
        {
          companyName: '',//"公司名称",
          projectCompletedPercent: 0,//项目已完成百分比,
          projectDoPercent: 0,//项目进行中百分比,
          projectExtendedPercent: 0,//项目已延期百分比,
          projectNumber: 0,//项目数量
        }
        ],
        screenDailyMatterProjectList: [
        {
          matterCompletedNumber: '',//事项完成数量,
          matterDoMunber: '',//事项进行中数量,
          matterExtendedNumber: '',//事项过期数量,
          matterNumber: '',//事项数量,
          statisticalTime:'',// "统计时间"
        }
        ],
        screenPlat: {
        activeUsersTotal: 0,//活跃用户,
        fileTotal: 0,//文件数量,
        matterCompletedPercent: 0,//事项已完成百分比,
        matterDoPercent:0,// 事项进行中百分比,
        matterExtendedPercent: 0,//事项已延期百分比,
        matterTotal: 0,//事项任务,
        projectCompletedPercent: 0,//项目已完成百分比,
        projectDoPercent: 0,//项目进行中百分比,
        projectExtendedPercent: 0,//项目已延期百分比,
        projectTotal: 0,//项目任务,
        userTotal: 0,//用户统计
        },
        screenProviceList: [
          {
            companyId: "",// "公司id"
            companyName: "",//公司名称
            projectNumber: "",//项目数量
            proviceName: "",//省份名称
            provinceCode: ""//省份code
          }
        ]
      },
      chinaType:'china',
      provinceName:'',
      province:{
        provinceName:'',
        province:'',
      },
      city:'',
      chinaMapAdcode: '',
      chinaMapInfo: [],
      mapDetail: {},
      allTreeList: [],
      dataTree: [],
      treeShow: false,
      blockShow:false,
      materialTree: [],
      food_num:null,
      timeData: [], 
      matterNumber: [],
      matterExtendedNumber: [],
      matterDoMunber: [],
      matterCompletedNumber: [],
    }
  },
  watch: {
    '$route.path': {
      handler(value) {
        if (
          [
            '/global-monitor/map-material',
            '/global-monitor/map-airplan',
            '/global-monitor/map-general'
          ].includes(value)
        ) {
          setTimeout(() => {
            this.blockShow = true
          }, 500)
        }
      },
      deep: true
    },
    chinaMapInfo: {
      handler() {
        if (this.organizationId) {
          this.$nextTick(() => {
            // this.chinaMapDetail()
          })
        }
      }
    }
  },
  async created() {
   await this.getScreenData()
   
  },
  mounted(){
   
  },
  methods: {
    handleClick() {
      
    },
    treeShowFun(val) {
      this.treeShow = val
    },
    adFilter(value) {
      const l = cityOps[value]
      return l
    },
    // 获取单位层次
    async getsubordinationRelationship() {
      
    },
    /**
     * 获取大屏数据
     */
    async getScreenData() {
      // this.$api.screenApi.getScreenData().then( async res => {
      //     // console.log('res',res);
      //     if(res.code=='200'){
      //       console.log('res',res.result);
      //       this.screenData={...res.result}
      //       this.timeData= this.screenData.screenDailyMatterProjectList.map(item=> this.formatUTCTime(item.statisticalTime));
      //       this.matterNumber =this.screenData.screenDailyMatterProjectList.map(item=> item.matterNumber);
      //       this.matterExtendedNumber =this.screenData.screenDailyMatterProjectList.map(item=> item.matterExtendedNumber);
      //       this.matterDoMunber =this.screenData.screenDailyMatterProjectList.map(item=> item.matterDoMunber);
      //       this.matterCompletedNumber =this.screenData.screenDailyMatterProjectList.map(item=> item.matterCompletedNumber);
      //       this.chinaMapInfo=this.screenData.screenProviceDataResList;
      //       this.setFooddata()
      //       // this.getProvinces()
      //     }
      //   }).catch(err => {
      //     this.$message.error(err.message)
      //   })
    },

    /**
     * 获取大屏数据
     */
     async getProvinces() {
      let param={
        "regionCode": "130000",
        "regionType": "1"
      }
      this.$api.screenApi.getScreenProviceData(param).then( async res => {
          // console.log('res',res);
          if(res.code=='200'){
            console.log('res',res.result);
            // this.chinaMapInfo=res.screenProviceDataResList;
          }
        }).catch(err => {
          this.$message.error(err.message)
        })
    },
    formatUTCTime(time) {      
        if (!time) {
          return
        }
        function addDateZero(num) {
          return (num < 10 ? '0' + num : num)
        }
        const d = new Date(time)
        const formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) 
        return formatdatetime
    },
    setFooddata(){
      this.food_num={
          tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#CCDCFF'
            }
          }
        }, 
        grid: {
                  left: '4%',
                  right: '4%',
                  bottom: '10%',
          },     
        legend: {
          data: ['事项数量','未完成事项', '进行中事项', '已完成事项'],
          textStyle: {color: '#CCDCFF'},
        },
        xAxis: [
          {
            type: 'category',
            data: this.timeData,
            axisTick: { show: true },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位',
            min: 0,
          },
          {
            type: 'value',
            name: '单位',
            min: 0,
          }
        ],
        series: [
          {
            name: '事项数量',
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value ;
              }
            },
            itemStyle: {
              color: '#8560FC'
            },
            data: this.matterNumber
          },
          {
            name: '未完成事项',
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value ;
              }
            },
            itemStyle: {
              color: '#E8E34E'
            },
            data: this.matterExtendedNumber
          },
          {
            name: '进行中事项',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value ;
              }
            },
            itemStyle: {
              color: '#36B2FF'
            },
            data: this.matterDoMunber
          },
          {
            name: '已完成事项',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            itemStyle: {
              color: '#00DD9C'
            },
            data: this.matterCompletedNumber
          }
        ]
      }
    },
    setChina(val) {
        this.chinaType=val.chinaType;
        if(val.chinaType=='province'){
          this.province=val
        }
        if(val.chinaType=='city'){
          this.city=val.city?val.city:''
        }
        this.provinceName=val.provinceName;
        
    },
    
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-tree-node__content:hover,
  .el-tree-node:focus > .el-tree-node__content {
    background: transparent !important;
  }
}
.global-monitor {
  height: calc(100%);
  display: flex;
  overflow: hidden;
  padding: 0 20px;
  position: relative;
  .global-monitor-left {
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: rgb(57 0 146 / 10%);
    .left-chars{
      height: calc((100% - 313px)/2);
    }
  }
  .global-monitor-right {
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: rgb(57 0 146 / 10%);
    .right-data{
      height: calc((100% - 20px)/2);
    }
  }
  .global-monitor-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    .global-monitor-center-bottom{
      display: block;
      text-align: center;
      width: 100%;
      height: 255px;
      z-index: 10000;
      position: absolute;
      background: rgb(57 0 146 / 10%);
      bottom: 0;
      padding: 15px 5px;
    }
    .left-dialng{
      display: block;
      text-align: center;
      z-index: 10000;
      position: absolute;
      bottom: 38%;
      left: 10px;
    }
  }
  .global-monitor-detail-all {
    position: absolute;
    top: 0;
    left: 488px;
  }
}
.lableSelect ::v-deep .select-panel {
  background: rgba(19, 41, 77, 1);
  border: 1px solid #87d2ff;
  .el-select-dropdown__item {
    color: rgba(255, 255, 255, 0.75);
  }
  .el-select-dropdown__item.hover {
    color: #17fff4 !important;
    background: rgba(62, 100, 172, 0.3);
  }
  .el-select-dropdown__empty {
    border: 1px solid #87d2ff;
    background: rgba(19, 41, 77, 1);
    border-radius: 0;
  }
  .popper__arrow {
    border-bottom-color: #87d2ff;
  }
  .popper__arrow::after {
    border: #87d2ff;
  }
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
::v-deep {
  .el-select .el-input.is-focus .el-input__inner {
    border-color: #87d2ff;
  }
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
    .el-tabs__nav {
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0.104167vw;
        background-color: #dfe4ed;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.75);
      }
    }
  }
}
</style>

<style lang="scss">
.tree-selects {
  .el-input__inner {
    background: rgba(62, 100, 172, 0.3);
    color: rgb(255, 255, 255, 0.75);
    border: 1px solid #87d2ff;
    border-radius: 0;
  }

  li.el-select-dropdown__item {
    background: rgba(62, 100, 172, 0.3);
  }
  .el-select-dropdown__item .hover {
    // color: #17fff4 !important;
    background: rgba(62, 100, 172, 0.3);
  }
}
.treeTab {
  .searchScreen {
    width: 270px;
  }
  .el-tree-node__content:hover {
    background: rgba(62, 100, 172, 0.3);
  }
  .el-input__inner {
    background: rgba(62, 100, 172, 0.3);
    color: rgb(255, 255, 255, 0.75);
    border: 1px solid #87d2ff;
    border-radius: 0;
  }
  .tree {
    width: 100% !important;
    opacity: 1;
  }
  .el-tree::-webkit-scrollbar {
    display: none;
  }
  .treeDiv {
    border: none;
    background: none;
  }
  .el-tree {
    width: 88%;
    background: none;
    color: rgb(255, 255, 255, 0.75);
    position: absolute;
    left: 20px;
    height: 68vh;
    overflow: auto;
  }
  .el-tree-node.is-current > .el-tree-node__content {
    background: rgba(62, 100, 172, 0.3);
  }
  .el-tree-node__content:hover {
    background-color: rgba(62, 100, 172, 0.3);
    color: #17fff4;
  }
}
.treeTabs {
  .tree {
    width: 100% !important;
    opacity: 1;
    padding: 20px 20px;
    height: 68vh;
    overflow: auto;
  }
  .tree::-webkit-scrollbar {
    display: none;
  }
  .treeDiv {
    border: none;
    background: none;
  }
  .el-tree {
    background: none;
    color: rgb(255, 255, 255, 0.75);
  }
  .el-tree-node.is-current > .el-tree-node__content {
    background: rgba(62, 100, 172, 0.3);
  }
  .el-tree-node__content:hover {
    background-color: rgba(62, 100, 172, 0.3);
    color: #17fff4;
  }
  .el-input__inner {
    background: rgba(62, 100, 172, 0.3);
    color: rgb(255, 255, 255, 0.75);
    border: 1px solid #87d2ff;
    border-radius: 0;
  }
}
</style>
